<template>
	<view class="user">
		<!-- 导航栏 -->
		<navgate-bar-vue :isBack="false" title="我的"></navgate-bar-vue>
		<!-- 底图 - 开始 -->
		<image class="user-header-image" src="/static/logo.jpg"></image>
		<!-- 底图 - 结束 -->

		<!-- 用户信息 - 开始 -->
		<view class="user-info-box">
			<image class="user-avatarUrl" :src="userInfo?.avatarUrl || user_avg"></image>
			<view class="user-info-right">
				<view class="user-nickname">{{ userInfo?.nickname || user_name }}</view>
			</view>
		</view>
		<!-- 用户信息 - 结束 -->

		<!-- 列表菜单 - 开始 -->
		<view class="user-activity-menu">
			<view class="menu-item" @click="handlePersonalClick">
				<view class="left">
					<image class="menu-icon" src="/static/icon/icon_userinfo.png"></image>
					<view class="menu-name">个人资料</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="menu-item" @click="handleHistoryClick">
				<view class="left">
					<image class="menu-icon" src="/static/icon/icon_toupiao.png"></image>
					<view class="menu-name">参加过的投票</view>
				</view>
			</view>
			<view class="menu-item" @click="handleCommentClick">
				<view class="left">
					<image class="menu-icon" src="/static/icon/icon_pinglun.png"></image>
					<view class="menu-name">历史评论</view>
				</view>
			</view>
			<view class="menu-item">
				<view class="left">
					<image class="menu-icon" src="/static/icon/icon_about.png"></image>
					<view class="menu-name">当前版本</view>
				</view>
				<view class="menu-number">{{ version }}</view>
			</view>
		</view>
		<!-- 列表菜单 - 结束 -->

		<view class="layoutOut" @click="handleLogout">
			退出登录
		</view>
	</view>
</template>

<script setup>
import {
	useUserStore
} from '@/store';
import {
	ref
} from 'vue';
//获取本地数据进行渲染
const userStore = useUserStore();

const userInfo = ref({
	avatarUrl: userStore.avatarUrl || '/static/images/moren.jpeg',
	nickname: userStore.nickname || '用户114'
});
const version = ref('1.0.0');

//页面跳转
const handlePersonalClick = () => {
	uni.navigateTo({
		url: '/pages/views/my/personal/index'
	});
};
const handleHistoryClick = () => {
	uni.navigateTo({
		url: '/pages/views/my/vito/index'
	});
};
const handleCommentClick = () => {
	uni.navigateTo({
		url: '/pages/views/my/comment/index'
	});
};

const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确认退出登录？',
		success: function (res) {
			if (res.confirm) {
				userStore.clearUserData();
				uni.reLaunch({
					url: '/pages/login/index'
				});
			}
		}
	});
};
</script>

<style lang="scss">
.user {
	.user-header-image {
		width: 100%;
	}

	.user-info-box {
		background: #ffffff;
		padding: 30rpx;
		margin: -80rpx 20rpx 20rpx 20rpx;
		position: relative;
		border-radius: 20rpx;
		display: flex;
		align-items: center;

		.user-avatarUrl {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}

		.user-nickname {
			margin-left: 20rpx;
		}

		.user-phone {
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #666666;
		}
	}

	.user-activity-menu {
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		background: #fff;

		.menu-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 60rpx;

			.left {
				display: flex;
				align-items: center;

				.menu-icon {
					width: 40rpx;
					height: 40rpx;
				}

				.menu-name {
					font-size: 28rpx;
					margin-left: 20rpx;
					color: #333;
				}
			}

			.menu-number {
				font-size: 30rpx;
				color: #666666;
				letter-spacing: 2rpx;
			}
		}

		.menu-item:first-child {
			margin-top: 0;
		}
	}

	.layoutOut {
		margin-top: 100rpx;
		margin-left: 40%;
		color: #666;
	}
}
</style>